<template>
	<div class="chat">
		<div :class="['tui-chat', !isPC && 'tui-chat-h5']">
			<div v-if="!currentConversationID" :class="['tui-chat-default', !isPC && 'tui-chat-h5-default']">
				<slot />
			</div>
			<div v-if="currentConversationID" :class="['tui-chat', !isPC && 'tui-chat-h5']">
				<ChatHeader :class="[
            'tui-chat-header',
            !isPC && 'tui-chat-H5-header',
            isUniFrameWork && 'tui-chat-uniapp-header',
          ]" :headerExtensionList="headerExtensionList" @closeChat="closeChat" />
				<Forward @toggleMultipleSelectMode="toggleMultipleSelectMode" />
				<MessageList ref="messageListRef"
					:class="['tui-chat-message-list', !isPC && 'tui-chat-h5-message-list']" :isGroup="isGroup"
					:groupID="groupID" :isNotInGroup="isNotInGroup" :isMultipleSelectMode="isMultipleSelectMode"
					@handleEditor="handleEditor" @closeInputToolBar="() => changeToolbarDisplayType('none')"
					@toggleMultipleSelectMode="toggleMultipleSelectMode" />
				<div v-if="isNotInGroup" :class="{
            'tui-chat-leave-group': true,
            'tui-chat-leave-group-mobile': isMobile,
          }">
					{{ leaveGroupReasonText }}
				</div>
				<MultipleSelectPanel v-else-if="isMultipleSelectMode" @oneByOneForwardMessage="oneByOneForwardMessage"
					@mergeForwardMessage="mergeForwardMessage" @toggleMultipleSelectMode="toggleMultipleSelectMode" />
				<template v-else>
					<MessageInputToolbar v-if="isInputToolbarShow" :class="[
              'tui-chat-message-input-toolbar',
              !isPC && 'tui-chat-h5-message-input-toolbar',
              isUniFrameWork && 'tui-chat-uni-message-input-toolbar'
            ]" :displayType="inputToolbarDisplayType" @insertEmoji="insertEmoji"
						@changeToolbarDisplayType="changeToolbarDisplayType"
						@scrollToLatestMessage="scrollToLatestMessage" />
					<MessageInput ref="messageInputRef" :class="[
              'tui-chat-message-input',
              !isPC && 'tui-chat-h5-message-input',
              isUniFrameWork && 'tui-chat-uni-message-input',
              isWeChat && 'tui-chat-wx-message-input',
            ]" :enableAt="featureConfig.InputMention" :isMuted="false" :messageConfig="messageConfig"
						:muteText="TUITranslateService.t('TUIChat.您已被管理员禁言')"
						:placeholder="TUITranslateService.t('TUIChat.请输入消息')"
						:inputToolbarDisplayType="inputToolbarDisplayType"
						@changeToolbarDisplayType="changeToolbarDisplayType" />
				</template>
			</div>
			<!-- Group Management -->
			<div v-if="!isNotInGroup && isUniFrameWork && isGroup && headerExtensionList.length > 0"
				class="group-profile" @click="handleGroup">
				{{ headerExtensionList[0].text }}
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref, onMounted, onUnmounted, computed } from '../../adapter-vue';
	import TUIChatEngine, {
		TUITranslateService,
		TUIConversationService,
		TUIStore,
		StoreName,
		IMessageModel,
		IConversationModel,
	} from '@tencentcloud/chat-uikit-engine';
	import TUICore, { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
	import ChatHeader from './chat-header/index.vue';
	import MessageList from './message-list/index.vue';
	import MessageInput from './message-input/index.vue';
	import MultipleSelectPanel from './mulitple-select-panel/index.vue';
	import Forward from './forward/index.vue';
	import MessageInputToolbar from './message-input-toolbar/index.vue';
	import { isPC, isWeChat, isUniFrameWork, isMobile } from '../../utils/env';
	import { ToolbarDisplayType } from '../../interface';
	import TUIChatConfig from './config';
	// @Start uniapp use Chat only
	import { onLoad, onUnload } from '@dcloudio/uni-app';
	import { initChat, logout } from './entry-chat-only.ts';
	import { TUIChatService } from "@tencentcloud/chat-uikit-engine";
	import { queryUserTrendsInfo, queryUserHome } from '@/utils/api/index.ts'
	import { lifeProductDetail, orderDetailBySonOrder } from '@/utils/api/goods'
	import api from '@/utils/api/recruit.js'
	const messageConfig = ref({})
	onLoad((options) => {
		messageConfig.value = options
		initChat(options);
		const { userId, trendsId, areaType, userIds, zId, messageType } = options;
		if (trendsId) {
			sendCustomMessage(userId, trendsId, areaType)
		}
		if (userIds) {
			sendMessage(userIds, userId, areaType)
		}
		if (areaType === 'position') {
			sendPostDetailMessage(userId, zId, messageType)
		}
	})
	const sendMessage = async (userIds : string, userId : string, areaType : string) => {
		const data = {
			pageNo: 1,
			pageSize: 1,
			userId: userIds
		}
		const res = await queryUserHome({ data: data })
		const url = `${getApp().globalData.baseUrl}/app/file/viewFile?fileId=${res.data.avatar}`
		let promise = TUIChatService.sendCustomMessage({
			payload: {
				data: JSON.stringify({
					businessID: "qiang",
					title: '',
					content: '',
					userName: res.data.userName,
					path: `/pages/qiangqiang/user?userId=${userIds}&areaType=${areaType}`,
					imageUrl: url,
				}),
				description: "",
				extension: ""
			},
			to: userId,
			conversationType: TUIChatEngine.TYPES.CONV_C2C // 确认传入的会话类型  
		});
		promise.catch((error) => {
			// 调用异常时业务侧可以通过 promise.catch 捕获异常进行错误处理
		});
	}
	// 职位详情
	const sendPostDetailMessage = async (userId, zId, messageType) => {
		// const data = {
		// 	pageNo: 1,
		// 	pageSize: 1,
		// 	userId:userIds
		// }
		const res = await api.viewPublishPosition(zId)
		// const res = await queryUserHome({ data: data })
		// const url = `${getApp().globalData.baseUrl}/app/file/viewFile?fileId=${res.data.avatar}`
		let promise = TUIChatService.sendCustomMessage({
			payload: {
				data: JSON.stringify({
					businessID: "position",
					zId: zId,
					messageType: messageType,
					datas: res.data
				}),
				description: "",
				extension: ""
			},
			to: userId,
			conversationType: TUIChatEngine.TYPES.CONV_C2C // 确认传入的会话类型  
		});
		promise.catch((error) => {
			console.log(error, '===rrr');
		});
	}
	const sendCustomMessage = async (userId : string, trendsId : string, areaType : string) => {
		if (areaType == 'shop') {
			//店铺自定义消息
			const { data } = await lifeProductDetail({ data: { id: trendsId, productType: 'PRODUCT' } })
			let promise = TUIChatService.sendCustomMessage({
				payload: {
					data: JSON.stringify({
						businessID: "shop",
						id: data.id,
						price: data.hasPreferential.value == 'Y' ? data.preferentialPrice : data.price,
						title: data.productName,
						imageUrl: `${getApp().globalData.baseUrl}/app/file/viewFile?fileId=${data.images[0]}`,
					}),
					description: "",
					extension: ""
				},
				to: userId,
				conversationType: TUIChatEngine.TYPES.CONV_C2C // 确认传入的会话类型  
			});
			promise.catch((error) => {
				// 调用异常时业务侧可以通过 promise.catch 捕获异常进行错误处理
			});
			return;
		}
		if (areaType == 'order') {
			//店铺自定义消息
			const { data } = await orderDetailBySonOrder({ data: { sonOrderNo: trendsId } })
			let promise = TUIChatService.sendCustomMessage({
				payload: {
					data: JSON.stringify({
						...data.orderProducts[0],
						businessID: "order1",
						sonOrderNo: trendsId,
						imageUrl: `${getApp().globalData.baseUrl}/app/file/viewFile?fileId=${data.orderProducts[0].productPicture}`,
					}),
					description: "",
					extension: ""
				},
				to: userId,
				conversationType: TUIChatEngine.TYPES.CONV_C2C // 确认传入的会话类型  
			});
			promise.catch((error) => {
				// 调用异常时业务侧可以通过 promise.catch 捕获异常进行错误处理
			});
			return;
		}
		const res = await queryUserTrendsInfo({ data: { trendsId: trendsId } })
		const imgId = res.data.appUserTrends.attachFiles[0].id
		const url = res.data.appUserTrends.fileType == 'PICTURE' ? `${getApp().globalData.baseUrl}/app/file/viewFile?fileId=${imgId}` : `${getApp().globalData.baseUrl}/app/file/viewFile?fileId=${imgId}&process=video/snapshot,t_1000,f_jpg,w_${res.data.appUserTrends.attachFiles[0].width},h_${res.data.appUserTrends.attachFiles[0].height},m_fast`
		let promise = TUIChatService.sendCustomMessage({
			payload: {
				data: JSON.stringify({
					businessID: "qiang",
					title: res.data.appUserTrends.title,
					content: res.data.appUserTrends.content,
					userName: res.data.queryUserHomeResponse.userName,
					path: `/pages/qiangqiang/qiangMore?id=${trendsId}&areaType=${areaType}`,
					imageUrl: url,
				}),
				description: "",
				extension: ""
			},
			to: userId,
			conversationType: TUIChatEngine.TYPES.CONV_C2C // 确认传入的会话类型  
		});
		promise.catch((error) => {
			// 调用异常时业务侧可以通过 promise.catch 捕获异常进行错误处理
		});
	};
	onUnload(() => {
		// Whether logout is decided by yourself  when the page is unloaded. The default is false.
		logout(false).then(() => {
			// Handle success result from promise.then when you set true.
		}).catch(() => {
			// handle error
		});
	});
	// @End uniapp use Chat only

	const emits = defineEmits(['closeChat']);

	const groupID = ref(undefined);
	const isGroup = ref(false);
	const isNotInGroup = ref(false);
	const notInGroupReason = ref<number>();
	const currentConversationID = ref();
	const isMultipleSelectMode = ref(false);
	const inputToolbarDisplayType = ref<ToolbarDisplayType>('none');
	const messageInputRef = ref();
	const messageListRef = ref<InstanceType<typeof MessageList>>();
	const headerExtensionList = ref<ExtensionInfo[]>([]);
	const featureConfig = TUIChatConfig.getFeatureConfig();

	onMounted(() => {
		TUIStore.watch(StoreName.CONV, {
			currentConversationID: onCurrentConversationIDUpdate,
			currentConversation: onCurrentConversationUpdate,
		});
	});

	onUnmounted(() => {
		TUIStore.unwatch(StoreName.CONV, {
			currentConversationID: onCurrentConversationIDUpdate,
			currentConversation: onCurrentConversationUpdate,
		});
		reset();
	});

	const isInputToolbarShow = computed<boolean>(() => {
		return isUniFrameWork ? inputToolbarDisplayType.value !== 'none' : true;
	});

	const leaveGroupReasonText = computed<string>(() => {
		let text = '';
		switch (notInGroupReason.value) {
			case 4:
				text = TUITranslateService.t('TUIChat.您已被管理员移出群聊');
				break;
			case 5:
				text = TUITranslateService.t('TUIChat.该群聊已被解散');
				break;
			case 8:
				text = TUITranslateService.t('TUIChat.您已退出该群聊');
				break;
			default:
				text = TUITranslateService.t('TUIChat.您已退出该群聊');
				break;
		}
		return text;
	});

	const reset = () => {
		TUIConversationService.switchConversation('');
	};

	const closeChat = (conversationID : string) => {
		emits('closeChat', conversationID);
		reset();
	};

	const insertEmoji = (emojiObj : object) => {
		messageInputRef.value?.insertEmoji(emojiObj);
	};

	const handleEditor = (message : IMessageModel, type : string) => {
		if (!message || !type) return;
		switch (type) {
			case 'reference':
				// todo
				break;
			case 'reply':
				// todo
				break;
			case 'reedit':
				if (message?.payload?.text) {
					messageInputRef?.value?.reEdit(message?.payload?.text);
				}
				break;
			default:
				break;
		}
	};

	const handleGroup = () => {
		headerExtensionList.value[0].listener.onClicked({ groupID: groupID.value });
	};

	function changeToolbarDisplayType(type : ToolbarDisplayType) {
		inputToolbarDisplayType.value = inputToolbarDisplayType.value === type ? 'none' : type;
		if (inputToolbarDisplayType.value !== 'none' && isUniFrameWork) {
			uni.$emit('scroll-to-bottom');
		}
	}

	function scrollToLatestMessage() {
		messageListRef.value?.scrollToLatestMessage();
	}

	function toggleMultipleSelectMode(visible ?: boolean) {
		isMultipleSelectMode.value = visible === undefined ? !isMultipleSelectMode.value : visible;
	}

	function mergeForwardMessage() {
		messageListRef.value?.mergeForwardMessage();
	}

	function oneByOneForwardMessage() {
		messageListRef.value?.oneByOneForwardMessage();
	}

	function onCurrentConversationUpdate(conversation : IConversationModel) {
		if (conversation?.operationType > 0) {
			headerExtensionList.value = [];
			isNotInGroup.value = true;
			/**
			 * 4 - be removed from the group
			 * 5 - group is dismissed
			 * 8 - quit group
			 */
			notInGroupReason.value = conversation?.operationType;
		} else {
			isNotInGroup.value = false;
			notInGroupReason.value = undefined;
		}
	}

	function onCurrentConversationIDUpdate(conversationID : string) {
		if (currentConversationID.value === conversationID) {
			return;
		}

		isGroup.value = false;
		let conversationType = TUIChatEngine.TYPES.CONV_C2C;
		if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
			conversationType = TUIChatEngine.TYPES.CONV_GROUP;
			isGroup.value = true;
			groupID.value = conversationID.replace(TUIChatEngine.TYPES.CONV_GROUP, '');
		}

		headerExtensionList.value = [];
		currentConversationID.value = conversationID;
		isMultipleSelectMode.value = false;
		// Initialize chatType
		TUIChatConfig.setChatType(conversationType);
		// While converstaion change success, notify callkit and roomkit、or other components.
		TUICore.notifyEvent(TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED, TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED, { groupID: groupID.value });
		// The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
		TUICore.callService({
			serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
			method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
			params: { conversationID: conversationID },
		});
		// Get chat header extensions
		if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.GROUP) {
			headerExtensionList.value = TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID);
		}
	}
</script>

<style scoped lang="scss" src="./style/index.scss"></style>